<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">
										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;">产值(￥)</span>
											</el-col>
											<el-col style="text-align: right" :span="7">
												<el-radio-group v-model="radio" size="mini">
													<el-radio-button label="天"></el-radio-button>
													<el-radio-button label="月"></el-radio-button>
												</el-radio-group>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24" v-if='radio=="月"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[0].monRealCount)}}</span>
								</el-col>
								<el-col :span="24" v-if='radio=="天"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[1].dayRealCount)}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">
										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">进厂辆次</span>
											</el-col>
											<el-col style="text-align: right" :span="8">
												<el-radio-group v-model="radio" size="mini">
													<el-radio-button label="天"></el-radio-button>
													<el-radio-button label="月"></el-radio-button>
												</el-radio-group>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24" v-if='radio=="月"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[2].monIntoCount)}}</span>
								</el-col>
								<el-col :span="24" v-if='radio=="天"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[3].dayIntoCount)}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">
										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">机电产值</span>
											</el-col>
											<el-col style="text-align: right" :span="8">
												<el-radio-group v-model="radio" size="mini">
													<el-radio-button label="天"></el-radio-button>
													<el-radio-button label="月"></el-radio-button>
												</el-radio-group>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24" v-if='radio=="月"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[4].monJdRealCount)}}</span>
								</el-col>
								<el-col :span="24" v-if='radio=="天"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[5].dayJdRealCount)}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">
										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">事故产值</span>
											</el-col>
											<el-col style="text-align: right" :span="8">
												<el-radio-group v-model="radio" size="mini">
													<el-radio-button label="天"></el-radio-button>
													<el-radio-button label="月"></el-radio-button>
												</el-radio-group>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24" v-if='radio=="月"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[6].monSgRealCount)}}</span>
								</el-col>
								<el-col :span="24" v-if='radio=="天"'>
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(real[7].daySgRealCount)}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24 ">
				<!--图形报表-->
				<el-row :gutter="24">

					<el-col :span="12">
						<div id="charts">
							<div id="main_work" :style="{width:'100%',height:'300px'}"></div>
						</div>
					</el-col>
					<el-col :span="12">
						<div id="charts">
							<div id="mains" :style="{width:'100%',height:'300px'}"></div>
						</div>
					</el-col>
				</el-row>
				<!--<div style="height: 25em; "></div>-->
			</el-col>
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">
										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">基盘客户</span>
											</el-col>
											<el-col style="text-align: right" :span="7">
												<el-button type="success" size="small">年</el-button>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24 ">
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(base[0].baseCount)}}</span>
								</el-col>
								<el-col :span="24 " style="text-align: right; ">
									<span style="font-size: 14px; color:rgb(51,51,51);">总客户数量：</span>
									<span style="font-size: 14px; color:rgb(0,0,225);">
										<strong>{{numIsNull(base[1].totalCount)}}</strong>
									</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">

										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">新增基盘</span>
											</el-col>
											<el-col style="text-align: right" :span="7">
												<el-button type="success" size="small">月</el-button>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24 ">
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(base[2].newBase)}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">

										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">活跃度</span>
											</el-col>
											<el-col style="text-align: right" :span="7">
												<el-button type="danger" size="small">年</el-button>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24 ">
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{maths()}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="padd">
							<el-row :gutter="24">
								<el-col :span="24">
									<div class="bodder">
										<el-row :gutter="24">
											<el-col :span="16">
												<span style="font-size: 24px;  ">活跃用户</span>
											</el-col>
											<el-col style="text-align: right" :span="7">
												<el-button type="info" size="small">年</el-button>
											</el-col>
										</el-row>
									</div>
								</el-col>
								<el-col :span="24">
									<hr style="height:1px;border:none;border-top:1px solid #dddddd;" />
								</el-col>
								<el-col :span="24">
									<div class="height"></div>
								</el-col>
								<el-col :span="24 ">
									<span style="font-size: 36px; color:rgb(1,1,1); ">&nbsp;&nbsp;&nbsp;{{numIsNull(base[3].activeCount)}}</span>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24 ">
				<div style="height: 1.5em; "></div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import echarts from 'echarts'
export default {
	data: function() {
		return {
			//公司还是集团
			//				isCompany: window.localStorage.getItem("path"),
			//月天切换的标识
			radio: '天',
			//产值
			real: [{
				"monRealCount": null
			}, {
				"dayRealCount": null
			}, {
				"monIntoCount": 0
			}, {
				"dayIntoCount": 0
			}, {
				"monJdRealCount": null
			}, {
				"dayJdRealCount": null
			}, {
				"monSgRealCount": null
			}, {
				"daySgRealCount": null
			}],
			//基盘
			base: [{
				"baseCount": 0
			}, {
				"totalCount": 0
			}, {
				"newBase": 0
			}, {
				"activeCount": 0
			}],
			miant: {
				month: [],
				realCount: []
			},
			into: {
				month: [],
				intoCount: []
			}
		}
	},
	methods: {
		//计算活跃度
		maths: function() {
			debugger;
			if (this.$data.base[0].baseCount == 0 || this.$data.base[0].baseCount == null) {
				return '0';
			} else {
				return (this.$data.base[3].activeCount / this.$data.base[0].baseCount * 100).toFixed(2) + "%";
			}
		},

		//判断数值是否为空
		numIsNull: function(val) {
			if (val == "" || val == null) return "0";
			if (val % 1 === 0) {
				return val;
			} else {
				return val.toFixed(2)
			}

		},
		//维修产值分析
		mounteds: function() {
			// 基于准备好的dom，初始化echarts实例
			if (document.getElementById('main_work') == null) {
				return;
			}
			var myChart = echarts.init(document.getElementById('main_work'));

			// 维修产值分析
			var option = {
				title: {
					text: '维修产值分析',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['产值']
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: this.$data.miant.month,
				}],
				yAxis: [{
					type: 'value',
					axisLabel: {
						formatter: '{value}'
					}
				}],
				series: [{
					name: '产值',
					type: 'line',
					data: this.$data.miant.realCount,
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}],
						symbolSize: [110, 70],
					}
				}]
			};
			myChart.setOption(option);
		},
		//维修产值分析
		mountedsInto: function() {
			debugger;
			if (document.getElementById('mains') == null) {
				return;
			}
			var myCharts = echarts.init(document.getElementById('mains'));
			// 进场分析
			var option = {
				title: {
					text: '进厂分析',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['进厂辆次']
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: this.$data.into.month,
				}],
				yAxis: [{
					type: 'value',
					axisLabel: {
						formatter: '{value}'
					}
				}],
				series: [{
					name: '进厂辆次',
					type: 'line',
					data: this.$data.into.intoCount,
					markPoint: {
						data: [{
							type: 'max',
							name: '最大值'
						}],
						symbolSize: [110, 70],

					}
				}]
			};
			myCharts.setOption(option);
		},
		//维修产值分析
		mainQuery: function() {
			this.$http.get(this.API_ROOT + '/crm/mainReport/maintainRealCount').then(resp => {
				if (resp.data.success) {
					debugger;
					this.$data.miant = resp.data.data;
					this.$data.miant.realCount = this.$data.miant.realCount;
					for (var i = 0; i < this.$data.miant.realCount.length; i++) {
						this.$data.miant.realCount[i] = this.$data.miant.realCount[i].toFixed(2);
					}

					this.mounteds();
				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
		},
		//进场分析
		intoQuery: function() {
			this.$http.get(this.API_ROOT + '/crm/mainReport/intoCount').then(resp => {
				if (resp.data.success) {
					debugger;
					this.$data.into = resp.data.data;
					this.mountedsInto();
				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
		},
		//查询产值
		realQuery: function() {
			this.$http.get(this.API_ROOT + '/crm/mainReport/realCount').then(resp => {
				if (resp.data.success) {
					this.$data.real = resp.data.data;
				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
		},
		//查询基盘
		baseQuery: function() {
			this.$http.get(this.API_ROOT + '/crm/mainReport/base').then(resp => {
				if (resp.data.success) {
					this.$data.base = resp.data.data;
				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
		},
	},
	//表单创建时执行
	created: function() {
		this.realQuery();
		this.baseQuery();
		//			this.mainQuery();
		//			this.intoQuery();
	},
	//页面渲染完执行
	mounted: function() {
		this.mainQuery();
		this.intoQuery();
	},
}
</script>
<style>
.padd {
	padding: 20, 20, 20, 20;
}

.bodder {
	margin-top: 20px;
	margin-bottom: 10px;
	color: rgb(51, 51, 51)
}

.height {
	height: 1em;
}
</style>